@import "./var";
@import "./ext";

html, body, ul, ol, li, p, div,
section, article, main, aside, nav, header,
u, i, b, a, span,
h1, h2, h3, h4, h5, h6,
input, textarea, button, select{
	font-size: 100%;
	font: inherit;
    color:inherit;
    outline: 0;
	vertical-align: baseline;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box !important;
}

body, html, pre, p, ul, ol, input, h1, h2, h3, h4, h5, h6, textarea, select{
    @include mp;
}

#root, html, body{
    @include wh(100vw, 100vh);
    @include cc($normal_color, $normal_bgc);
    overflow: hidden;
    font-size:  $normal_fsz;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[type="text"] {
    @include mp(0, $normal_input_padding);
    border: $normal_input_border;
    background-color: #fff;
    outline: 0;
    &:focus {
        border-color: #77c;
        box-shadow: inset 0 0 2px #99c;
    }
}

.empty_list_item {
    @include hh(2.5rem);
    @include abc;
    color: #a99;
    text-align: center;
    pointer-events: none;
    user-select: none;
}

@keyframes fa-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes fa-shake {
    0% {
        transform: rotate(-15deg);
    }
    4% {
        transform: rotate(15deg);
    }
    8%, 24% {
        transform: rotate(-18deg);
    }
    12%, 28% {
        transform: rotate(18deg);
    }
    16% {
        transform: rotate(-22deg);
    }
    20% {
        transform: rotate(22deg);
    }
    32% {
        transform: rotate(-12deg);
    }
    36% {
        transform: rotate(12deg);
    }
    40%, 100% {
        transform: rotate(0deg);
    }
}

@keyframes fa-fade {
    50% {
        opacity: var(--fa-fade-opacity, 0.4);
    }
}

.fa-fade {
    animation-name: fa-fade;
    animation-delay: var(--fa-animation-delay, 0);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 1s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
}

.fa-shake {
    animation-name: fa-shake;
    animation-delay: var(--fa-animation-delay, 0);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 1s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, linear);
}

 .fa-spin {
    animation-name: fa-spin;
    animation-delay: var(--fa-animation-delay, 0);
    animation-direction: var(--fa-animation-direction, normal);
    animation-duration: var(--fa-animation-duration, 2s);
    animation-iteration-count: var(--fa-animation-iteration-count, infinite);
    animation-timing-function: var(--fa-animation-timing, linear);
}
